<template>
  <div class='container'>
    <el-dialog
               :visible.sync="dialogFormVisible"
               :before-close="close"
               :title="title"
               :open="() => open"
               width="400px"
               ref="dialog">
      <el-form :model="form" :rules="rules"
               ref="formRef"
               label-width="80px" size="small">
        <el-form-item label="所属学科"
                      prop="subjectID"
                      v-if="!isSubjectCome">
          <el-select v-model="form.subjectID"
                     placeholder="请选择">
            <el-option
                       v-for="item in subjectList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称"
                      prop="directoryName">
          <el-input v-model="form.directoryName"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
                   @click="cancel">
          取 消</el-button>
        <el-button type="primary"
                   @click="confirm">
          确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 弹出框显示与隐藏
    dialogFormVisible: Boolean,
    // 学科列表
    subjectList: Array,
    // 标题
    title: String,
    // 是否为编辑
    isEdit: Boolean,
    // 当前行数据
    currentRowData: Object,
    // 是否从学科页面跳转而来
    isSubjectCome: {
      default: true,
      type: Boolean
    }
  },
  data () {
    return {
      form: {
        directoryName: '',
        subjectID: null
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹出框时
    close () {
      this.cancel()
    },
    // 点击弹出框取消按钮
    cancel () {
      this.$emit('cancel')
      this.$refs.formRef.resetFields()
    },
    // 点击确认按钮
    confirm () {
      this.$emit('confirm', this.form, this.$refs.formRef)
    }
  },
  // 当是编辑模式时将当前行数据给输入框
  updated () {
    if (this.isEdit) {
      this.form = this.currentRowData
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .el-input--suffix {
  width: 280px;
}
</style>
